<template>
	<view class="sell_selivery">
		<view class="close" @click="close">
			<image src="@/static/images/close.png"></image>
		</view>
		<view class="header">交割</view>
		<view class="info_view">
			<image :src="data_info.product_cover" class="cover"></image>
			<view class="info_box">
				<view class="name">{{data_info.product_name}}</view>
				<view class="price">
					<text class="unit">$</text>
					<text class="value">{{data_info.price}}</text>
				</view>
			</view>
		</view>
		<view class="title">stream链接</view>
		<view class="price_view">
			<input type="text" placeholder="请输入stream链接" v-model="steaml_url">
		</view>
		<view class="title">交易密码</view>
		<view class="code_view">
			<uv-code-input mode="box" color="#fff" dot @finish="finish"></uv-code-input>
		</view>
		<view class="submit">
			<view @click="submit">确认交割</view>
		</view>
	</view>
</template>

<script setup>
	import {
		orderInfo,
		orderDelivery
	} from "@/request/api";
	import {
		onUnmounted
	} from "vue";
	import {
		ref,
		nextTick
	} from "vue";
	const props = defineProps({
		id: [String, Number]
	});
	const emit = defineEmits(["close", "reload"]);

	const data_info = ref({});
	let payment_service = ref(0);
	const getDeta = async () => {
		let {
			info,
			setting
		} = await orderInfo({
			id: props.id
		});
		data_info.value = info;
		payment_service.value = setting.payment_service;
	};
	getDeta();

	const steaml_url = ref("");

	const close = () => emit("close");
	let value;
	const finish = (e) => value = e;
	const submit = async () => {
		await orderDelivery({
			id: props.id,
			steaml_url: steaml_url.value,
			pay_password: value
		});
		uni.$uv.toast("操作成功");
		setTimeout(() => emit("reload"), 1500);
	};
	onUnmounted(() => value = null);
</script>

<style scoped lang="scss">
	.sell_selivery {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background: #2F2F2F;
		position: relative;

		.close {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			z-index: 2;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.header {
			color: #FFFFFF;
			font-size: 40rpx;
			font-weight: bold;
			padding-left: 10rpx;
			padding-bottom: 50rpx;
			box-sizing: border-box;
		}

		.info_view {
			height: 240rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background: #2B2B2B;
			display: flex;
			align-items: center;

			.cover {
				width: 200rpx;
				height: 200rpx;
			}

			.info_box {
				flex: 1;
				min-height: 200rpx;
				padding: 18rpx 0 26rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: 800;
				}

				.number {
					color: #999999;
					font-size: 32rpx;
					font-weight: 800;
					margin-top: 30rpx;
					margin-bottom: 40rpx;
				}

				.price {
					color: #DDF247;

					.unit {
						font-size: 20rpx;
						font-weight: bold;
					}

					.value {
						font-size: 36rpx;
						font-family: DINPro;
					}
				}
			}
		}

		.title {
			color: #CCCCCC;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 40rpx;
			margin-bottom: 30rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			position: relative;

			&::after {
				content: "";
				width: 5rpx;
				height: 32rpx;
				background: #DDF247;
				position: absolute;
				left: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;
			}
		}

		.price_view {
			height: 78rpx;
			border-radius: 10rpx;
			background: #2B2B2B;
			display: flex;
			align-items: center;

			input {
				flex: 1;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				padding-left: 30rpx;
				box-sizing: border-box;
			}
		}

		.code_view {
			display: flex;
			justify-content: center;
		}

		.submit {
			margin-top: 80rpx;
			padding: 0 45rpx;
			box-sizing: border-box;

			view {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #111111;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 20rpx;
				background: #DDF247;
			}
		}
	}
</style>